import ReactDOM from "react-dom/client";

// 1. 下载库 npm i react-router-dom
// 2. 引入 BrowserRouter 组件：
// 最外层的组件，能够让它的后代组件使用路由功能
// 如果 BrowserRouter 不是最外层，在其外面组件不能使用路由功能

// 引入 HashRouter 组件，功能和 BrowserRouter 基本一致，不同就是路由路径带 #
import { BrowserRouter, HashRouter } from "react-router-dom";

/*
  前端路由的两种模式：history 和 hash 模式
    BrowserRouter 提供的是 history 模式
    HashRouter 提供的是 hash 模式

  区别：
    1. history 模式路径更美观，没有 #。hash 模式路径带 #，不美观。
    2. history 模式兼容性稍差（ie10+）。hash 模式兼容性更好(ie8+) --> 可以上 caniuse 网址查询兼容性问题
    3. history 模式原理通过 history.pushState 实现， hash 模式原理通过 window.location.hash 实现
*/

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
